<template>
    <view class="container">
        <header-bar :config="config"></header-bar>
        <view class="main">
            <view class="card-cell type-cell">
                <view class="cell-title flex-s-c" style="width: 100%">
                    <view>回访内容:</view>
                </view>
                <textarea
                    class="textarea"
                    maxlength="300"
                    @input="sum"
                    v-model="content"
                    placeholder="请详细描述回访情况"></textarea>
                <view class="number"
                    ><text class="pr10"
                        ><text class="strong">{{ num }}</text
                        >/300
                    </text></view
                >
            </view>
            <view class="card-cell type-cell">
                <text class="cell-title">上传图片(选填)</text>
                <view class="img-cell">
                    <view class="" v-if="imageList.length < 9">
                        <view class="add-img" @tap="chooseImage">
                            <uni-icons type="camera" size="80"></uni-icons>
                            <text>添加图片</text>
                        </view>
                    </view>
                    <block v-for="(image, index) in imageList" :key="index">
                        <view class="img-item">
                            <image
                                class="img"
                                mode="aspectFill"
                                :src="image"
                                :data-src="image"
                                @tap="previewImage"></image>
                            <view @click="del(index)">
                                <uni-icons class="btn-del" type="closeempty" customIcons="icon-white"></uni-icons>
                            </view>
                        </view>
                    </block>
                </view>
            </view>
            <view class="tip">
                <view>{{ address }}</view>
                <view class="btn btn-main-hollow btn-location" @click="selectAddress">
                    <uni-icons type="location-filled"></uni-icons>
                    <text>重新定位</text>
                </view>
            </view>
            <view class="acton-bar flex-s-c">
                <button class="btn btn-success" @click="save">提交</button>
            </view>
        </view>
    </view>
</template>

<script>
import { uploadImage } from "@/service/api/file.js"
import { SubmitVisitRecord } from "@/service/api/store.js"
export default {
    data() {
        return {
            config: {
                title: "回访",
                centerSlot: true,
                rightSlot: false,
                rightBtns: [
                    {
                        btnType: 1,
                        type: "保存",
                    },
                ],
            },
            num: 0,
            writeoffCodeId: "",
            StoreUserId: "",
            StoreId: "",
            evaluateId: "",
            checked: false,
            imageList: [],
            content: "",
            address: "",
            selectList: [],
        }
    },
    onLoad(e) {
        this.StoreUserId = e.StoreUserId
        this.writeoffCodeId = e.writeoffCodeId
        // this.address = e.address
        this.StoreId = e.StoreId
    },
	mounted() {
		this.getlocation()
	},
    methods: {
		getlocation(){
			let that = this
			uni.getLocation({
			  type: 'wgs84',
			  success: function (res) {
			    // 获取经度
			    var longitude = res.longitude;
			    // 获取纬度
			    var latitude = res.latitude;
			    // 默认显示当前位置
					that.getAddressByLatLng(latitude, longitude);
			  },
			  fail: function (err) {
			    console.error('获取位置失败：', err);
			  }
			});
		},
		 getAddressByLatLng(latitude, longitude) {
		  // 调用地图服务提供商的API，这里以高德地图API为例
		  let amapKey = '8f07ddaea9e88a0424c57caf64da00a7'; // 高德地图API Key
		  let url = `https://restapi.amap.com/v3/geocode/regeo?output=JSON&key=${amapKey}&location=${longitude},${latitude}`;
			console.log(latitude)
			console.log(longitude)
		  uni.request({
			url,
			success: (res) => {
				console.log(res)
			  if (res.data && res.data.regeocode) {
				this.address = res.data.regeocode.formatted_address;
			  } else {
				uni.showToast({
				  title: '获取地址失败',
				  icon: 'none'
				});
			  }
			},
			fail: () => {
			  uni.showToast({
				title: '请求失败',
				icon: 'none'
			  });
			}
		  });
		},
        checkbox(e) {
            let value = e.detail.value.length
            if (value > 0) {
                this.checked = true
            } else {
                this.checked = false
            }
        },
        sum(e) {
            this.num = e.detail.value.length
        },
        //预览图片
        previewImage(e) {
            var current = e.target.dataset.src
            uni.previewImage({
                current: current,
                urls: this.imageList,
            })
        },
        //选择图片
        chooseImage() {
            let that = this
            uni.chooseImage({
                count: 9, //默认9
                sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
                sourceType: ["album"], //从相册选择
                success: function (res) {
                    // that.imageList = that.imageList.concat(res.tempFilePaths);
                    that.upLoadPicFn(res)
                },
            })
        },
        //删除图片
        del(index) {
            this.imageList.splice(index, 1)
        },
        //上传图片
        upLoadPicFn(files) {
            for (var i = 0; i < files.tempFilePaths.length; i++) {
                let param = {
                    filePath: files.tempFilePaths[i],
                    formData: {},
                }
                uploadImage(param).then((e) => {
                    if (e.Data) {
                        this.imageList.push(e.Data.FullPath)
                        if (this.imageList.length > 9) {
                            this.imageList.length = 9
                        }
                    }
                })
            }
            // let param = {
            // 	filePath: files.tempFilePaths[0],
            // 	formData: {}
            // }
            // uploadImage(param).then(e => {
            // 	if (e.Data) {
            // 		this.imageList.push(e.Data.FullPath)
            // 	}
            // })
        },
        selectAddress() {
            // uni.navigateTo({
            //     url: "/pages/map/map-poi",
            //     events: {
            //         getSelectData: (data) => {
            //             this.address = data.address.replace(/\\/g, "")
            //         },
            //     },
            // })
			let that = this
			uni.chooseLocation({
			    success: function (res) {
			        console.log(res)
			        console.log("位置名称：" + res.name)
			        console.log("详细地址：" + res.address)
			        console.log("纬度：" + res.latitude)
			        console.log("经度：" + res.longitude)
			        that.address = res.address
			    },
			})
        },
        save() {
            if (this.content == "") {
                uni.showToast({
                    icon: "none",
                    title: "回访内容不能为空",
                    duration: 2000,
                })
                return
            }
            var that = this
            let parms = {
                visitUserId: this.StoreUserId,
                type: 0,
                content: this.content,
                addres: this.address,
            }
            if (this.imageList.length > 0) {
                parms.images = this.imageList.join(",")
            }
            SubmitVisitRecord(parms).then((res) => {
                if (res.State == 1) {
                    uni.showToast({
                        icon: "none",
                        title: "保存成功",
                        duration: 2000,
                    })
                    setTimeout(() => {
                        that.easyRemoveCurrentGoTo(
                            "/pages/customer/detail?StoreId=" + this.StoreId + "&StoreUserId=" + this.StoreUserId,
                        )
                    }, 2000)
                } else {
                    uni.showToast({
                        icon: "none",
                        title: res.Msg,
                        duration: 2000,
                    })
                }
            })
        },
    },
}
</script>

<style lang="scss">
.main {
    padding: $app-page-padding;
}

.type-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: #ffffff;
    border-radius: 8rpx;
    padding: 34rpx 24rpx 10rpx 24rpx;
    margin-bottom: 24rpx;
    .cell-title {
        display: flex;
        flex: 1;
        font-size: 30rpx;
        color: $color-gray-1;
        margin-bottom: 32rpx;
    }

    .types {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;

        .btn {
            width: 140rpx;
            padding: 0;
            border-radius: 10rpx;
            font-size: 26rpx;
            height: 52rpx;
            border: 1rpx solid #f6f6f6;
            color: $color-gray-1;
            margin-bottom: 20rpx;
            background: #f6f6f6;
        }

        .btnactive {
            background: #ffffff;
            color: #ffae45;
            border-color: #ffae45;
        }

        &:after {
            content: " ";
            width: 48%; //这个宽度和子元素宽度一致
            height: 0;
            display: block;
        }
    }
}

.textarea {
    display: flex;
    width: 98%;
    padding: 1%;
    min-height: 140rpx;
    font-size: $font-size-24;
    line-height: 40rpx;
    height: 236rpx;
    background: #f6f7f7;
    border-radius: 8rpx;
    // border: 1rpx solid #ec808d;
}
.acton-bar {
    margin-top: 70rpx;

    .btn {
        width: 100%;
        height: 80rpx;
    }
}
.number {
    padding-top: 10rpx;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    font-size: 24rpx;

    background: #f6f7f7;
    padding-bottom: 10rpx;
    margin-bottom: 10rpx;
    .pr10 {
        padding-right: 10rpx;
        color: #cccccc;
    }
    .strong {
        font-size: 26rpx;
    }
}
.img-cell {
    display: flex;
    flex: 1;
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom: 20rpx;

    &:after {
        content: " ";
        width: 33%; //这个宽度和子元素宽度一致
        height: 0;
        display: block;
    }

    .img-item {
        position: relative;
        width: 180rpx;
        height: 180rpx;
        margin-bottom: $app-item-padding;
        margin-right: $app-item-padding;

        .img {
            width: 180rpx;
            height: 180rpx;
            border-radius: $border-radius-10;
        }

        .btn-del {
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            top: -36rpx;
            right: -36rpx;
            width: 50rpx;
            height: 50rpx;
            border-radius: 40rpx;
            background: rgba($color-black, 0.3);
            color: $color-white;
            margin: 15rpx;
        }
    }

    .add-img {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 178rpx;
        height: 178rpx;
        border-radius: $border-radius-10;
        border: dashed 1rpx $color-gray-6;
        margin-right: $app-item-padding;
        margin-bottom: $app-item-padding;

        text {
            margin-top: 6rpx;
        }
    }
}
.tip {
    color: #f0201f;
    font-size: 24rpx;
    display: flex;
    align-items: center;
    .btn-location {
        border: none;
    }
}
</style>
